<script setup lang="ts">
	//发布岗位
	import { onMounted, reactive, ref } from "vue";
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	const router = useRouter()
	import {
		validatePhoneNumber,
	} from '@/utlis/common.js'
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	// import form from "../../../uni_modules/uview-plus/libs/config/props/form";
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()

	let itemId = ref('')
	let form1 = ref(null)
	let marketType = ref([])

	let form = ref({
		jobName: '',
		jobCategoryId: '',
		jobCategoryName: '',
		jobDescription2: '',
		comprehensiveSalaryType: '',
		comprehensiveSalaryStart: '',
		comprehensiveSalaryEnd: '',
		basicBenefits: '',
		educationRequirements: '',
		educationRequirementsName: '',
		workExperienceTime: '',
		workExperienceTimeName: '',
		provinceId: '',
		provinceName: '',
		cityId: '',
		cityName: '',
		areaId: '',
		areaName: '',
		address: '',
		jobRemark: '',
		contactsUser: '',
		contactsPhone: '',
		status: '1',
		age: '',
		isCertification: '',
		isCertificationName: '',
		longitude: '',
		latitude: ''
	})
	let Rules = ref({

	})
	let state = reactive({
		type: '',
		showSelect: false,
		actions: [],
		educationBackgroundAction: [
			{ name: '不限', val: '' },
			{ name: '初中及以下', val: 0 },
			{ name: '高中（中专）', val: 1 },
			{ name: '大学（本专科）', val: 2 },
			{ name: '硕士及以上', val: 3 },
			{ name: '不限学历', val: -1 },

		],
		workYearAction: [
			{ name: '3年以内', val: 0 },
			{ name: '3-5年', val: 1 },
			{ name: '6年以上', val: 2 },
			{ name: '不限年限', val: -1 }
		],
		//年龄限制 0（18-25）1（25-35）3（35以上）-1（不限年龄） 
		ageAction: [
			{ name: '18-25', val: 0 },
			{ name: '25-35', val: 1 },
			{ name: '35以上', val: 2 },
			{ name: '不限年龄', val: -1 }
		],
		isCertificationActions: [
			{ name: '否', val: 0 },
			{ name: '是', val: 1 },
		],
	})

	
	const jobId = ref(null)
	const pageType = ref('')
	onLoad((options) => {
		console.log('options', options)
		pageType.value = options.type
		if (options.type === "edit") {
			uni.setNavigationBarTitle({
				title: '修改职位'
			})
			jobId.value = options.id
			getDetail()
		}
		if (options && options.pageType == "jobCategory") {
			// form.value = uni.ge
			// let data = uni.getStorageSync('jobInfo')
			// form.value = JSON.parse(uni.getStorageSync('jobInfo'))
			console.log(JSON.parse(uni.getStorageSync('jobInfo')));
			let jobInfo = JSON.parse(uni.getStorageSync('jobInfo'))
			form.value.jobName = jobInfo.jobName,
				form.value.jobCategoryId = options.jobCategoryId,
				form.value.jobCategoryName = options.name,
				form.value.jobDescription2 = jobInfo.jobDescription2,
				form.value.comprehensiveSalaryType = jobInfo.comprehensiveSalaryType,
				form.value.comprehensiveSalaryStart = jobInfo.comprehensiveSalaryStart,
				form.value.comprehensiveSalaryEnd = jobInfo.comprehensiveSalaryEnd,
				form.value.basicBenefits = jobInfo.basicBenefits,
				form.value.educationRequirements = jobInfo.educationRequirements,
				form.value.educationRequirementsName = jobInfo.educationRequirementsName,
				form.value.age = jobInfo.age,
				form.value.ageName = jobInfo.ageName,
				form.value.workExperienceTime = jobInfo.workExperienceTime,
				form.value.workExperienceTimeName = jobInfo.workExperienceTimeName,
				form.value.provinceId = jobInfo.provinceId,
				form.value.provinceName = jobInfo.provinceName,
				form.value.cityId = jobInfo.cityId,
				form.value.cityName = jobInfo.cityName,
				form.value.areaId = jobInfo.areaId,
				form.value.areaName = jobInfo.areaName,
				form.value.address = jobInfo.address,
				form.value.jobRemark = jobInfo.jobRemark,
				form.value.contactsUser = jobInfo.contactsUser,
				form.value.contactsPhone = jobInfo.contactsPhone,
				// form.value.status:'1'
				form.value.jobCategoryId = options.jobCategoryId
			form.value.jobCategoryName = options.name

		} else if (options && options.pageType == "jobDesc") {
			form.value = JSON.parse(uni.getStorageSync('jobInfo'))
			form.value.jobDescription2 = options.info
		} else if (options && options.pageType == "jobPay") {
			form.value = JSON.parse(uni.getStorageSync('jobInfo'))
			form.value.comprehensiveSalaryType = options.comprehensiveSalaryType
			form.value.comprehensiveSalaryStart = options.comprehensiveSalaryStart
			form.value.comprehensiveSalaryEnd = options.comprehensiveSalaryEnd
			form.value.basicBenefits = options.basicBenefits
			form.value.comprehensiveSalaryType = options.comprehensiveSalaryType

		} else if (options && options.pageType == "jobAddress") {
			form.value = JSON.parse(uni.getStorageSync('jobInfo'))
			form.value.provinceId = options.provinceId
			form.value.province = options.province
			form.value.city = options.city
			form.value.cityId = options.cityId
			form.value.areaName = options.areaName
			form.value.areaId = options.areaId
			form.value.address = options.address

		}
	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.getMeiyeRecruitJob2Details, {
			id: jobId.value,
		}).then((res) => {
			if (res.code === 200) {
				console.log(res.result);
				let idx = state.isCertificationActions.findIndex(el => el.val == res.result.isCertification)
				if (idx != -1) {
					res.result.isCertificationName = state.isCertificationActions[idx].name
				}
				form.value = res.result
			
				form.value.nativePlace = res.result.provinceName?res.result.provinceName + res.result.cityName + res.result.areaName:''
			}
		})
	}
	const showSelectBtn = (type) => {
		console.log(type,'type')
		state.type = type
		switch (type) {
			case 'educationBackground':
				state.actions = state.educationBackgroundAction
				break;
			case 'workYear':
				state.actions = state.workYearAction
				break;
			case 'workAge':
				state.actions = state.ageAction
				break;
			case 'isCertification':
				state.actions = state.isCertificationActions
				break;

			default:
				break;
		}

		state.showSelect = true
	}
	const SelectFun = (e) => {
		let type = state.type
		switch (type) {
			case 'educationBackground':
				form.value.educationRequirements = e.val
				form.value.educationRequirementsName = e.name
				break;
			case 'workYear':
				form.value.workExperienceTime = e.val
				form.value.workExperienceTimeName = e.name
				break
			case 'workAge':
				form.value.age = e.val
				form.value.ageName = e.name
				break
			case 'isCertification':
				form.value.isCertification = e.val
				form.value.isCertificationName = e.name
				break
			default:
				break;
		}
	}
	const typeChose = () => {
		let arr = marketType.value.map((item) => {
			return item.name
		})
		// console.log(marketType.value);
		uni.showActionSheet({
			itemList: arr,
			success: function (res) {
				form.value.type = arr[res.tapIndex]
				form.value.typeId = marketType.value[res.tapIndex].id
			},
			fail: function (res) {
				// console.log(res.errMsg);
			}
		});
	}
	const routerLink = (name) => {

		uni.setStorageSync('jobInfo', JSON.stringify(form.value))
		console.log(name,'namenamename')
		router.replace({
			name: name,
			params: {}
		})
		// router.push({
		// 	name: name,
		// 	params: {}
		// })
	}
	const showTotal = ()=>{
		let arr = [
			{key:'jobName',desc:'请填写职位名称'},
			{key:'jobCategoryName',desc:'请填写职位类别'},
			{key:'jobDescription2',desc:'请填写职位描述'},
			{key:'educationRequirementsName',desc:'请选择职学历要求'},	
			{key:'workExperienceTimeName',desc:'请选择工作年限'},
			{key:'age',desc:'请选择年龄要求'},
			
			{key:'isCertificationName',desc:'请选择是否是国家认证人才'},
			{key:'address',desc:'请选择工作地点'},
			
			{key:'contactsUser',desc:'请输入联系人'},
			{key:'contactsPhone',desc:'请输入手机号'},
		]
		for (let i = 0; i < arr.length; i++) {
			if (form.value[arr[i].key] === null || form.value[arr[i].key] === '') {
				uni.showToast({
				  title: arr[i].desc,
				  icon: 'none'
				});
				return false;
			}
		}
		return true
		
	}
	const submitForm = () => {
		if(!showTotal()){
			return
		}
		if (!validatePhoneNumber(form.value.contactsPhone)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		if (form.value.id == null) {
			proxy.$req('POST', proxy.$api.meiyeRecruitJob3Add, form.value).then(res => {
				if (res.code == '200') {
					uni.removeStorageSync('jobInfo')
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					router.push({
						name: 'postJob',
						params: {}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				console.log(res, 'addform')
			}).catch(errors => {
				console.log(errors);
				uni.showToast({
					title: '请检查表单',
					icon: 'none'
				})
			})
		} else {
			proxy.$req('POST', proxy.$api.meiyeRecruitJob3Edit, form.value).then(res => {
				if (res.code == '200') {
					uni.removeStorageSync('jobInfo')
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					router.push({
						name: 'postJob',
						params: {}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				console.log(res, 'editform')
			}).catch(errors => {
				console.log(errors);
				uni.showToast({
					title: '请检查表单',
					icon: 'none'
				})
			})
		}

		// form1.value.validate().then(res => {

		// })

		// proxy.$req('POST',proxy.$api.meiyeRecruitJob3Add, form).then(res>{
		// 	console.log(res,'res')
		// })
	}
	const chooseLocation = () => {
		console.log("2222222222");
		uni.chooseLocation({ 
			success: res => {
				console.log(res,'res')
				// form.value.areaName = options.areaName
				form.value.address = res.name
				form.value.areaName = res.address
				form.value.latitude = res.latitude
				form.value.longitude = res.longitude
				
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					geocode: true,
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}
		})

	}
	const addressChecked = (e) => {
		//选择地址
		console.log(e);
		
		let addressData = e.detail.value
		
		form.value.provinceId = addressData[0].value
		form.value.cityId = addressData[1].value
		form.value.areaId = addressData[2].value
		form.value.nativePlace = addressData[0].text + addressData[1].text + addressData[2].text
		
	// 	form.value.city = options.city
	// 	form.value.cityId = options.cityId
	// 	form.value.areaName = options.areaName
	// 	form.value.areaId = options.areaId
	// 	form.value.address = options.address
		
	
		
		
	// 	state.info.nativePlace = e.detail.value[0].text + e.detail.value[1].text + e.detail.value[2].text
	}
</script>
<template>
	<view class="form card">
		<u--form :model="form" :rules="Rules" ref="form1" labelPosition="top" labelWidth="150">
			<u-form-item class="formItem" label="" prop="jobName">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>职位名称</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.jobName" border="none" placeholder="请填写职位名称"></u--input>
			</u-form-item>
			<u-form-item class="formItem " label="" prop="jobCategoryName" @click.stop="routerLink('jobCategory')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>职位类别</text>
						</view>
					</view>
				</template>
				<u--input v-model="form.jobCategoryName" border="none" disabled disabledColor="#fff" placeholder="请选择职位类别"></u--input>
			</u-form-item>
			<u-form-item class="formItem " label="" prop="type" @click.stop="routerLink('jobDesc')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>职位描述</text>
						</view>

					</view>
				</template>
				<u-parse :content="form.jobDescription2" v-if='form.jobDescription2'></u-parse>
				<u--input v-else border="none" disabled disabledColor="#fff" placeholder="介绍工作内容,职位要求,加分项等"></u--input>
			</u-form-item>

			<u-form-item class="formItem" label="" prop="title" @click.stop="routerLink('jobPay')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>综合薪资</text>
						</view>

					</view>
				</template>
				<view class="" v-if="form.comprehensiveSalaryType == 0">面议</view>
				<view class="" v-else-if="form.comprehensiveSalaryType == 1">
					{{form.comprehensiveSalaryStart}}-{{form.comprehensiveSalaryEnd}}元/月</view>
				<u--input v-else border="none" placeholder="请选择合理的薪资范围"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="educationRequirementsName" @click.native="showSelectBtn('educationBackground')">
				<template #label>
					<view class="r-flex-between-center" >
						<view class="labelBox">
							<text>*</text>
							<text>学历要求</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.educationRequirementsName"  disabled disabledColor="#fff" border="none"
					placeholder="请选择学历要求"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="workExperienceTimeName" @click.stop="showSelectBtn('workYear')">
				<template #label >
					<view class="r-flex-between-center" >
						<view class="labelBox">
							<text>*</text>
							<text>工作年限</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.workExperienceTimeName" border="none" disabled disabledColor="#fff"
					placeholder="请选择年限要求"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="ageName" @click.stop="showSelectBtn('workAge')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>年龄要求</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.ageName" border="none" disabled disabledColor="#fff"
					placeholder="请选择年龄要求"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="isCertificationName" @click.stop="showSelectBtn('isCertification')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>是否是国家认证人才</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.isCertificationName" border="none" disabled disabledColor="#fff"
					placeholder="请选择是否是国家认证人才"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="address">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>选择城市</text>
						</view>
			
					</view>
				</template>
				<uni-data-picker class="input" v-model="form.nativePlace" :localdata="userStoreInfo.getAddressListCheckData" popup-title="请选择" :map="{
					text:'name',
					value:'id',
				}" @change="addressChecked">
					<view :style="{color:form.nativePlace?'#333':'rgba(0,0,0,0.25)',paddingRight:'18rpx'}">
						{{form.nativePlace?form.nativePlace:'请选择' }}
					</view>
				</uni-data-picker>
				<!-- <u--input v-model="form.address" border="none" disabled disabledColor="#fff"
					placeholder="请选择工作地点"></u--input> -->
			</u-form-item>
			<u-form-item class="formItem" label="" prop="address" @click.stop="chooseLocation()">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>工作地点</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.address" border="none" disabled disabledColor="#fff"
					placeholder="请选择工作地点"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="jobRemark">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>填写更多要求</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.jobRemark" border="none" placeholder="选填"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="contactsUser">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>联系人</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.contactsUser" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="contactsPhone">
				<template #label>
					<view class="r-flex-between-center">
						<view class="labelBox">
							<text>*</text>
							<text>手机号</text>
						</view>

					</view>
				</template>
				<u--input v-model="form.contactsPhone" border="none" placeholder="请输入"></u--input>
			</u-form-item>

		</u--form>
		<view class="gysBtn" @click="submitForm('gysAddMarket')">
			{{pageType =='edit'?'保存':'发布'}}
		</view>


		<u-action-sheet :show="state.showSelect" :actions="state.actions" title="请选择" description=""
			@close="state.showSelect = false" @select="SelectFun">
		</u-action-sheet>
	</view>
</template>
<style lang="scss" scoped>
	page {
		background-color: #F2F2F2;
		padding:20rpx 0;
	}
	.card{
		background:#fff;
		box-sizing: border-box;
		border: 2rpx solid #fff;
		margin: 30rpx auto;
		padding: 24rpx;
		background:#fff;
		border-radius: 24rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
	}
	.form {
		width: 686rpx;
		margin: 0 auto;

		.formItem {
			border-bottom: 1rpx solid #e7e7e7;
			
			.labelBox{
				text:last-child{
					font-size:28rpx;
				}
			}
			.formItemArea {
				width: 100%;
			}
		}
	}

	.gysBtn {
		width: 586rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #CB645E;
		border-radius: 10rpx;
		color: #fff;
		margin: 50rpx auto;
	}
</style>